<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>windy</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .menu {
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            z-index: 2;
        }

        .base-button {
            height: 30px;
            line-height: 30px;
            background: #1b9de8;
            color: #ffffff;
            border-radius: 6px;
            border: 1px solid #bfcbd9;
            padding: 0 10px;
            box-shadow: 0 4px 10px rgba(73, 127, 255, .42);
            transition: .3s;
        }

        .base-button:hover {
            cursor: pointer;
            border-color: #1b9de8;
            color: #ffffff;
        }
    </style>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol.js"></script>
    <script src="js/windLayer.js"></script>
    <script src="lib/jquery/jquery-3.3.1.js"></script>
</head>
<body>
<div id="map">
    <div class="menu">
        <button class="base-button" onclick="getData()">getData</button>
        <button class="base-button" onclick="setData()">setData</button>
        <button class="base-button" onclick="clearWind()">clearWind</button>
        <button class="base-button" onclick="removeLayer()">removeLayer</button>
    </div>
</div>
<script>

    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });
    //var osm=new ol.layer.Tile({source: new ol.source.OSM()});
    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("img_w"),
            getTdtLayer("img_w"),

        ],
        view:view,
        target: 'map'
    });

    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.gov.cn/"+lyr+"/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER="+lyr.split("_")[0]+"&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=07c3369864c03fb6a162ac560811db9b")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
/*    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                layerName: 'baseLayer',
                preload: 4,
                source: new ol.source.OSM({
                    url: "http://{a-c}.sm.mapstack.stamen.com/" +
                        "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
                        "{z}/{x}/{y}.png"
                })
            })
        ],
        loadTilesWhileAnimating: true,
        pixelRatio: 1,
        view: new ol.View({
            projection: 'EPSG:3857',
            center: [113.53450137499999, 34.44104525],
            zoom: 5
        })
    });*/
    var wind, data;
    var realtime = false;

    var url='';
    if (realtime)
    {
        url='../server/public/parseData/2018090706.json';
    }
    else
    {
        url= './json/out.json'
    }
    $.ajax({
        type: "GET",
        url: url,
        dataType:'json',
    }).then(function (res) {
        if (res) {
            data = res
            wind = new windLayer.OlWind(data, {
                //Number:1.5,
                //visible:false,
                layerName: 'data',
                projection: 'EPSG:3857',
                ratio: 1,
                map: map
            })
            console.log(wind);
            // map.addLayer(wind)
            wind.appendTo(map);
            map.on('pointermove', function (event) {
                var _data = wind.getPointData(ol.proj.transform(event.coordinate, map.getView().getProjection(), 'EPSG:4326'));
                //console.log(_data);
            });
        }
    });

    function getData () {
        var _data = wind.getData();
        console.log(_data)
    }

    function setData () {
        wind.setData(data)
    }

    function clearWind () {
        wind.clearWind()
    }

    function removeLayer () {
        wind.removeLayer()
    }

    map.on("click", function(e) {
        console.log(e)

    });
</script>
</body>
</html>
